<template>
    <div class="w-full home-view overflow-hidden">
        <div class="w-full h-[100vh]">
            <div
                class="w-full h-[100vh] banner indexBanner relative"
                v-if="state.bannerList.length > 0"
            >
                <img
                    class="bannerImg"
                    :src="state.bannerList[0]?.imagePath || bannerFullImg"
                />
                <div class="title w-[84vw]">
                    <p class="top" v-html="state.bannerList[0]?.imageName"></p>
                    <p class="btm" v-html="state.bannerList[0]?.imageDescription">
                    </p>
                </div>
                <div class="icon"></div>
            </div>
        </div>
        <div class="advantage">
            <div
                v-aos.once="['animate__fadeInUp']"
                class="title text-center animate__animated"
            >
                {{ $t("common.advantage") }}
            </div>
            <div class="content maxWidth1400 mx-auto flex justify-between">
                <div
                    class="item w-1/4 bg-white relateive px-[50px] py-[60px] animate__animated delay__0_2s"
                    :class="[`animate__delay-${(index + 1) * 1}s`]"
                    v-aos.once="['animate__fadeInLeft']"
                    :data-aos-delay="`${(index + 1) * 0.5}s`"
                    v-for="(item, index) in state.advantageList"
                >
                    <div class="img-box">
                        <img class="img active" :src="item?.attribute2" />
                        <img class="img white" :src="item?.attribute3" />
                    </div>
                    <div class="item-title">{{ item?.title }}</div>
                    <div class="item-line"></div>
                    <div class="desc">
                        {{ item?.titleDesc }}
                    </div>
                </div>
            </div>
            <div
                class="about content flex justify-between items-center maxWidth1400"
            >
                <div
                    class="left w-[50%] bg-[#fff] animate__animated"
                    v-aos.once="['animate__fadeInLeft']"
                >
                    <div class="title">
                        {{ state?.aboutWaterWood[0]?.title }}
                    </div>
                    <div class="line"></div>
                    <p v-html="state?.aboutWaterWood[0]?.titleDesc"></p>
                    <div
                        class="more"
                        @click="
                            $router.push({
                                path: '/about',
                                query: { key: 'introduce' },
                            })
                        "
                    >
                        {{ $t("home.text1") }}
                    </div>
                </div>
                <div
                    class="right w-[50%] animate__animated"
                    v-aos.once="['animate__fadeInRight']"
                >
                    <img :src="state?.aboutWaterWood[0]?.attribute1" />
                </div>
            </div>
        </div>
        <div class="business flex justify-between items-center">
            <div
                class="item animate__animated delay__0_2s"
                :class="[`animate__delay-${(index + 1) * 1}s`]"
                v-aos.once="['animate__fadeInLeft']"
                v-for="(item, index) in state.businessList"
            >
                <div class="img-box">
                    <img :src="item?.attribute3" />
                </div>
                <div class="title">
                    <h3 class="text-[#fff] h-[30px]">{{ item?.title }}</h3>
                    <p>{{ item?.subtitle }}</p>
                </div>
                <div class="desc text-[#fff]">
                    {{ item?.titleDesc }}
                </div>
                <div
                    class="more"
                    @click="
                        $router.push({
                            path: '/service/fund',
                            query: { key: item.key },
                        })
                    "
                >
                    <img src="/assets/image/indfwArr.png" />
                </div>
            </div>
        </div>
        <div class="news maxWidth1400 overflow-hidden">
            <div class="content">
                <div class="flex justify-between items-center">
                    <div class="left">
                        <div class="title">{{ $t("common.newsTitle") }}</div>
                        <div class="line"></div>
                    </div>
                    <div
                        class="right cursor-pointer flex justify-center items-center"
                        v-if="state.newsList.length > 3"
                    >
                        <div class="swiper-button-prev" id="swiper-button-prev">
                            <el-icon :size="26">
                                <ArrowLeft />
                            </el-icon>
                        </div>
                        <div class="swiper-button-next" id="swiper-button-next">
                            <el-icon :size="26">
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                </div>
                <div class="news-list overflow-hidden">
                    <swiper
                        :direction="`horizontal`"
                        :modules="[Navigation, Autoplay]"
                        :slidesPerView="3"
                        :slidesPerGroup="1"
                        :spaceBetween="48"
                        :loop="true"
                        :autoplay="true"
                        :observer="true" 
                        :observeParents="true"
                        :navigation="{
                            nextEl: '#swiper-button-next',
                            prevEl: '#swiper-button-prev',
                        }"
                        @swiper="onSwiper"
                        class="newsSwiper animate__animated"
                        ref="newsSwiperRef"
                        v-aos.once="['animate__fadeInUp']"
                    >
                        <swiper-slide
                            v-for="item in state.newsList"
                            :key="item.id"
                            @click="
                                $router.push({
                                    path: '/detail',
                                    query: { id: item.id },
                                })
                            "
                        >
                            <div class="imgBox">
                                <img :src="item?.titleImage" alt="" />
                            </div>
                            <div class="title">{{ item?.title }}</div>
                            <div class="desc">
                                {{ item?.titleDesc }}
                            </div>
                            <div class="time">
                                {{ item?.publishDate?.split(" ")[0] }}
                            </div>
                        </swiper-slide>
                    </swiper>
                </div>
            </div>
        </div>
        <el-dialog
            v-model="alert"
            title=" "
            width="73%"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            class="disclaimer-alert"
        >
            <h2 class="disclaimer">{{ $t("common.disclaimerTitle") }}</h2>
            <div class="scrollBox" v-html="state.statement[0]?.context"></div>
            <template #footer>
                <div class="alert-footer">
                    <div class="buttonBox">
                        <button class="reject" @click="rejectOperation">
                            {{ $t("common.reject") }}
                        </button>
                        <button
                            class="accept"
                            @click="acceptOperation"
                            :color="`#04C093`"
                        >
                            {{ $t("common.accept") }}
                        </button>
                    </div>
                    <div class="right">
                        <div class="acceptBox">
                            <el-checkbox v-model="accept" size="large" />
                            <span
                                class="cursor-pointer"
                                @click="accept = !accept"
                                :style="{
                                    color: isAccept && !accept ? '#f00' : '',
                                }"
                                >{{ $t("common.read") }}</span
                            >
                        </div>
                    </div>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { onMounted, watch } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { Navigation, Autoplay } from "swiper/modules";
import bannerFullImg from "/assets/image/banner.jpg";

const { locale } = useI18n();
const newsSwiperRef = ref(null);
const alert = ref(true);
const accept = ref(false);
const isAccept = ref(false);
const isRead = ref(true);
const state = reactive({
    advantageList: [],
    aboutWaterWood: [],
    businessList: [],
    newsList: [],
    statement: [],
    bannerList: [],
});
const getAdvantageList = async () => {
    const res = await useGET("/v1/aricle/page", {
        query: {
            page: 1,
            limit: 99,
            type: 101,
        },
    });
    state.advantageList = res?.rows.length ? res.rows : [];
};

const getAboutWaterWood = async () => {
    const res = await useGET("/v1/aricle/page", {
        query: {
            page: 1,
            limit: 99,
            type: 160,
        },
    });
    state.aboutWaterWood = res?.rows.length ? res.rows : [];
};

const getBusinessList = async () => {
    const res = await useGET("/v1/aricle/page", {
        query: {
            page: 1,
            limit: 99,
            type: 108,
        },
    });
    if (res?.rows.length) {
        const serviceMenuKeys = [
            "fund",
            "externalAsset",
            "familyTrust",
            "investConsult",
        ];
        res.rows.forEach((item, index) => {
            item.key = serviceMenuKeys[index];
        });
        state.businessList = res.rows;
        // console.log("state.bussinessList", state.businessList);
    } else {
        state.businessList = [];
    }
};

const getNewsList = async () => {
    const res = await useGET("/v1/aricle/page", {
        query: {
            page: 1,
            limit: 99,
            type: 1,
        },
    });
    state.newsList = res?.rows.length ? res.rows : [];
};

const getStatement = async () => {
    const res = await useGET("/v1/aricle/page", {
        query: {
            page: 1,
            limit: 99,
            type: 110,
        },
    });
    state.statement = res?.rows.length ? res.rows : [];
};
const getBanner = async () => {
    const res = await useGET("/v1/aricle/bannerList");
    state.bannerList = res?.rows.length ? res.rows : [];
};

onMounted(() => {
    getAdvantageList();
    getAboutWaterWood();
    getBusinessList();
    getNewsList();
    getStatement();
    getBanner();
    if (sessionStorage.getItem("isRead")) {
        alert.value = false;
    }
});

watch(
    () => locale.value,
    (val) => {
        getAdvantageList();
        getAboutWaterWood();
        getBusinessList();
        getNewsList();
        getStatement();
        getBanner();
    }
);
const onSwiper = (swiper) => {
    newsSwiperRef.value = swiper;
};
const langChangeHandle = (lang) => {
    locale.value = lang;
    // 英文状态下切换字体
    let dataLang = lang === "en" ? lang : "";
    document.documentElement.setAttribute("data-lang", dataLang);
};

const acceptOperation = () => {
    if (!accept.value) return (isAccept.value = true);
    sessionStorage.setItem("accept", true);
    alert.value = false;
    if (isRead.value) {
        sessionStorage.setItem("isRead", true);
    }
};
const rejectOperation = () => {
    window.location.href = "about:blank";
};
</script>
<style scoped>
.banner {
    display: flex;
    align-items: center;
}

.banner .icon {
    position: absolute;
    bottom: 46px;
    left: 50%;
    margin-left: -15px;
    width: 30px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 14px 14px 14px 14px;
}

.banner .icon::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 12px;
    background: #fff;
    animation: bannerMouse 1.6s linear infinite;
}

.banner .title {
    margin: 0 auto;
    width: 1400px;
    color: #fff;
    font-size: 60px;
    font-weight: bold;
    font-size: 72px;
}

.banner .title .top {
    color: #ffd201;
    font-weight: 300;
    animation: bannerUp 1.2s ease both 0.3s;
}

.banner .title .btm {

    line-height: 80px;
    animation: bannerUp 1.2s ease both 0.6s;
}

html[data-lang="en"] .banner .title .btm {
    font-weight: 600;
}

.indexBanner .bannerImg {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    animation: bannerSlace 3s ease both;
}

.advantage {
    padding-top: 82px;
    padding-bottom: 110px;
    background: #f6f6f6 url("/assets/image/indysBg.png") no-repeat center top;
}

.advantage > .title {
    line-height: 1.1;
    color: #000;
    position: relative;
    padding-bottom: 16px;
    font-size: 28px;
}

.advantage > .title::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 3px;
    background: #003b96;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
}

.advantage .content {
    margin-top: 50px;
}

.advantage .content .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
}

.advantage .content .item .img-box {
    width: 102px;
    height: 102px;
    border-radius: 50%;
    border: 2px solid #003b96;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
}

.advantage .content .item .img-box .img {
    display: none;
}

.advantage .content .item .img-box .img.active {
    display: block;
}

.advantage .content .item .item-title {
    color: #4c4c4c;
    letter-spacing: 3px;
    transition: all 0.4s ease;
    margin-top: 16px;
    font-size: 18px;
}

.advantage .content .item .item-line {
    width: 45px;
    height: 1px;
    background: #003b96;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.4s ease;
    margin-top: 16px;
}

.advantage .content .item .desc {
    transition: all 0.4s ease;
}

.advantage .content .item .desc {
    text-align: center;
    margin-top: 24px;
    line-height: 24px;
    font-size: 14px;
    color: #999;
}

.advantage .content .item:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: url("/assets/image/indysLine.png") no-repeat center / auto 100%;
}

.advantage .content .item:hover .item-title {
    color: #fff;
}

.advantage .content .item:hover {
    background-color: #003b96;
}

.advantage .content .item:hover .img-box {
    border-color: #fff;
    transform: translateY(-10px);
}

.advantage .content .item:hover .img-box .img.white {
    display: block;
}

.advantage .content .item:hover .img-box .img.active {
    display: none;
}

.advantage .content .item:hover .item-line {
    background-color: #ffc600;
}

.advantage .content .item:hover .desc {
    color: #fff;
}

.advantage .about {
    /* width: 1400px; */
    margin: 0 auto;
    background: #fff;
    padding: 60px 60px 80px;
    margin-top: 100px;
}

.advantage .about .left {
    padding-right: 76px;
}

.advantage .about .title {
    line-height: 1.1;
    color: #000;
    position: relative;
    padding-bottom: 16px;
    font-size: 30px;
}

.advantage .about .title::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 3px;
    background: #003b96;
    left: 0;
    bottom: 0;
}

.advantage .about p {
    color: #999;
    line-height: 30px;
    margin-top: 36px;
    letter-spacing: 1.2px;
    font-size: 16px;
}

.advantage .about p br {
    content: "";
    display: block;
    height: 20px;
}

.advantage .about .more {
    width: 134px;
    height: 42px;
    background: #003b96;
    color: #fff;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin-top: 50px;
    font-size: 14px;
}

.advantage .about .more:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 59, 150, 0.3);
}

.advantage .about .right {
    width: 625px;
    height: 320px;
    overflow: hidden;
    cursor: pointer;
}

.advantage .about .right img {
    transition: all 0.4s ease;
}

.advantage .about .right:hover img {
    transform: scale(1.1);
}

.business {
    width: 100%;
    /* height: 500px; */
    background-image: url("/assets/image/indfwBg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.business .item {
    width: 25%;
    padding: 130px 88px 70px;
    box-sizing: border-box;
    transition: all 0.6s ease;
}

.business .item .img-box {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 2px solid #fff;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.business .item .title {
    margin-top: 18px;
}

.business .item .title p {
    text-transform: uppercase;
    opacity: 0.53;
    min-height: 42px;
    color: #fff;
    margin-top: 4px;
    font-size: 14px;
    letter-spacing: 1.2px;
}

.business .item .desc {
    margin-top: 24px;
    line-height: 24px;
    font-size: 12px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-align: justify;
    letter-spacing: 1.2px;
}

.business .item .more {
    margin-top: 36px;
    transition: all 0.3s ease;
}

.business .item:hover {
    background-color: #003b96;
}

.business .item:hover .img-box {
    background-color: #ffc600;
    border-color: #ffc600;
}

.business .item:hover .more {
    transform: translateX(10px);
}

.news {
    background-color: #fff;
    padding-bottom: 82px;
    padding-top: 110px;
}
.news .content {
    /* width: 1400px; */
    margin: 0 auto;
}

.news .content .left > .title {
    line-height: 1.1;
    color: #000;
    position: relative;
    padding-bottom: 16px;
    font-size: 30px;
}

.news .content .left > .title::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 3px;
    background: #003b96;
    left: 0;
    bottom: 0;
}

.newsSwiper {
    margin-top: 62px;
    overflow: hidden;
}

.newsSwiper ::v-deep(.swiper-wrapper) {
    display: flex;
}

.newsSwiper .swiper-slide {
    flex-shrink: 0;
    cursor: pointer;
}

.newsSwiper .swiper-slide .title {
    margin-top: 30px;
    max-height: 60px;
    font-size: 18px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.newsSwiper .swiper-slide .desc {
    color: #666;
    height: 78px;
    font-weight: 300;
    line-height: 26px;
    font-size: 14px;
    margin-top: 18px;
    letter-spacing: 1.2px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.newsSwiper .swiper-slide .time {
    color: #999;
    font-weight: 300;
    font-size: 14px;
    margin-top: 24px;
}

.newsSwiper .swiper-slide .imgBox {
    overflow: hidden;
    width: 100%;
}

.newsSwiper .swiper-slide .imgBox img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: all 0.3s ease;
}

.newsSwiper .swiper-slide:hover .imgBox img {
    transform: scale(1.1);
}

.newsSwiper .swiper-slide:hover .title {
    color: #002a94;
}

@keyframes bannerMouse {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translateY(22px);
        opacity: 0;
    }
}

.alert-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    margin: 0 60px;
}

.buttonBox {
    margin-right: 20px;

    button {
        height: 44px;
        padding: 0 50px;
        border-radius: 30px;
        margin-right: 15px;
        font-size: 16px;
    }

    .reject {
        border: 1px solid #e5bc2b;
        color: #000;
    }

    .accept {
        background-color: #e5bc2b;
        color: #fff;
    }
}

.alert-footer .right {
    display: flex;
    justify-content: left;
    align-items: center;
}

.scrollBox {
    padding: 0 60px;
    height: 400px;
    overflow-x: auto;
}

.scrollBox::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #ddd;
}

.scrollBox::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #999;
}

.acceptBox,
.isShow {
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.acceptBox span,
.isShow span {
    margin-left: 6px;
    font-size: 16px;
    color: #2c3e50;
}

.disclaimer {
    width: 100%;
    text-align: center;
    line-height: 2;
    font-size: 36px;
    color: #ff0000;
}
</style>
<style>
.disclaimer-alert {
    border-radius: 20px !important;
}

.el-checkbox.el-checkbox--large .el-checkbox__inner {
    width: 18px;
    height: 18px;
}

.el-checkbox__inner:after {
    left: 6px;
    top: 3px;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #e5bc2b;
    border-color: #e5bc2b;
}

.el-checkbox__inner:hover {
    border-color: #e5bc2b;
}

.scrollBox p {
    line-height: 26px !important;
}

.scrollBox p strong {
    display: block;
    margin-bottom: 10px;
}

@keyframes bannerUp {
    0% {
        opacity: 0;
        transform: translateY(80px);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes bannerSlace {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
</style>
